<script lang="ts">
	import MenuButton from '$components/business/menu-button/menu-button.svelte';
	import OrderItem from './_com/OrderItem.svelte';
	import { onDestroy, onMount } from 'svelte';
	import { handleReqMounted } from '@/hooks/handleReq';
	import { createMessage } from '$components/basic/message';
	import { get, type Unsubscriber } from 'svelte/store';
	import { PageLoading } from '$components/basic/loading';
	import { useNavBarStore } from '@/store/modules/navBar';
	import { Icon } from '@smui/button';
	import IconButton from '@smui/icon-button';
	import NavList from '$components/business/nav-list/NavList.svelte';
	import PagingNavigation from '$components/basic/page-navigation/PagingNavigation.svelte';
	import Empty from '$lib/empty/orderEmpty.svg';

	const action = (index: number) => (resetPage(), (params.sort = index), reqInfo());
	let sortList = [
		{ action: () => action(0), icon: 'sort', label: 'Default' },
		{ action: () => action(1), icon: 'swap_vert', label: 'Date,old to new' },
		{ action: () => action(2), icon: 'swap_vert', label: 'Date,new to old' },
		{ action: () => action(3), icon: 'height', label: 'Status, small to large' },
		{ action: () => action(4), icon: 'height', label: 'Status, large to small' },
		{ action: () => action(5), icon: 'sort_by_alpha', label: 'Amount, low to high' },
		{ action: () => action(6), icon: 'sort_by_alpha', label: 'Amount, high to low' }
	];

	let tabs = [
		{
			id: '0',
			name: 'Canceled',
			num: 0
		},
		{
			id: '1',
			name: 'Created',
			num: 0
		},
		{
			id: '2',
			name: 'Confirmed',
			num: 0
		},
		{
			id: '3',
			name: 'Quoted',
			num: 0
		},
		{
			id: '4',
			name: 'Paid',
			num: 0
		},
		{
			id: '5',
			name: 'Shipped',
			num: 0
		},
		{
			id: '6',
			name: 'Completd',
			num: 0
		},
		{
			id: '9',
			name: 'Error',
			num: 0
		}
	];

	let isHandle = false;
	let orderList: IObject[] = [];
	let total = 1;
	const params = {
		page: 1,
		size: 10,
		sort: 0,
		status: null,
		keyword: ''
	};
	const resetSort = () => (params.sort = 0);
	const resetPage = () => (params.page = 1);
	const resetKeyword = () => ((params.keyword = ''), (isHandle = true), navStore.keyword.set(''));
	const resetStatus = () => (params.status = null);
	const handle = (res) => {
		const data = res.data;
		if (data && data.statusData) {
			tabs = data.statusData;
			orderList = data.list;
			total = data.total;
		}
	};
	const res = handleReqMounted('/order/list', { params, handle });
	const { error, loading, reqInfo } = res;

	const tabChange = ({ detail }: CustomEvent) => (
		resetPage(), resetSort(), (params.status = detail.id), resetKeyword(), reqInfo()
	);
	const refresh = () => (resetStatus(), resetPage(), resetSort(), resetKeyword(), reqInfo());

	const navStore = useNavBarStore();
	let isfirst = true;
	let unsubscriber: Unsubscriber | null = null;
	const listenKeyWord = () =>
		(unsubscriber = navStore.keyword.subscribe((value) => {
			if (isfirst) return (isfirst = false), resetKeyword();
			if (isHandle) return (isHandle = false), void 0;
			console.log(1, value);
			resetStatus();
			resetPage();
			params.keyword = value;
			reqInfo();
		}));
	onMount(listenKeyWord);
	onDestroy(() => (unsubscriber ? () => unsubscriber!() : () => void 0));

	function quryData({ detail }: CustomEvent<any>): void {
		const { size } = detail;
		params.size = size;
		reqInfo(true);
	}
</script>

<div class="w-full flex-cc flex-col p-20px">
	<div class="flex-1 w-1320px max-w-100% min-w-350px flex flex-col gap-20px pb-20px">
		<div class="w-full flex justify-between items-center bg-gray-2">
			<div class="wrapper w-fit h-full flex-cc">
				<div class="macnn-common__header-menu-button h-full bg-blue-7 color-white">
					<IconButton
						on:click={refresh}
						class="material-symbols-outlined clear-button-radius"
						title="All Orders">restart_alt</IconButton
					>
				</div>
				<NavList {tabs} on:tab:change={tabChange} />
			</div>
			<MenuButton text="Sort By" color="var(color-blue-7)" style="height: 48px;" list={sortList}
			></MenuButton>
		</div>
		<PageLoading loading={$loading}>
			{#if !orderList.length}
				<div class="w-full flex-cc">
					<img src={Empty} alt="no orders" />
				</div>
			{/if}
			{#each orderList as orderInfo}
				<OrderItem {orderInfo} on:refresh={() => reqInfo()} />
			{/each}
		</PageLoading>
		<PagingNavigation
			position="end"
			variableSize
			pageSize={params.size}
			bind:total
			bind:currentPage={params.page}
			on:pageNavigationChange={quryData}
		></PagingNavigation>
	</div>
</div>
